<template>
  <div class="steps-container">
    <div class="title" v-for="(item, index) in names" :key="index" :class="{'active': value > index}">
      {{item}}
      <div class="triangle" :class="{'triangle-active': value > index, 'arrow-active': value === index + 1}"></div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'steps',
  props: {
    controllerType: {
      type: String,
      default: '1'
    },
    value: {
      type: Number,
      default: 1
    }
  },
  computed: {
    names () {
      let names = []
      if (this.controllerType === '1') {
        names = ['新建网关', '驱动配置', '子设备配置', '网关配置']
      } else if (this.controllerType === '2') {
        names = ['新建网关', '驱动配置', '点位配置', '网关配置']
      } else if (this.controllerType === '8') {
        names = ['选择维修单', '选择备件']
      } else if (this.controllerType === '9') {
        names = ['选择保养单', '选择备件']
      }
      return names
    }
  },
  data () {
    return {
    }
  }
}
</script>

<style scoped lang="stylus">
.steps-container
  display flex
  overflow hidden
  .title
    flex 1
    height 48px
    display flex
    justify-content center
    align-items center
    background #DFE4FF
    font-size 14px
    font-weight 500
    color #FFFFFF
    position relative
  .active
    background #5F77FD

.triangle
  position absolute
  right -52px
  z-index 10
  top -1px
  width 0
  height 0
  border-width 26px
  border-style solid
  border-color transparent transparent transparent #ffffff;
.triangle::after
  content ''
  position absolute
  left -26px
  top -24px
  border-width 24px
  border-style solid
  border-color transparent transparent transparent #dfe4ff
.arrow-active
  border-color transparent transparent transparent #5f77fd
.triangle-active::after
  border-color transparent transparent transparent #5f77fd

</style>
